<template>
  <div class="dynamic-container">
    <div v-show="!showMaster">
      <div class="dynamicBreadCrumb">
        <div style="float: left">
          <bread-crumb :child-data="selectedRow.funNo" class="card-bread-crumb"></bread-crumb>
        </div>
        <div style="float: right">
          <dynamicButton
            :permissionPrefix="permissionPrefix"
            :buttonData="dynamicData.buttonData"
            class="dynamicButton"
            @updateValue="passToMaster"
            @handleExport="exportExcel"
            @handleRemove="handleRemove"
            @handleStatistics="handleStatistics"
          ></dynamicButton>
        </div>
      </div>
      <el-card class="box-card dynamicSearch" ref="searchCard">
        <dynamicSearch
          ref="dySearch"
          :searchData="dynamicData.searchData"
          @postForm="getList"
          @resetSearch="getRetrieve"
          :isFloatRight="false"
        ></dynamicSearch>
      </el-card>
      <el-card class="box-card dynamicContext" ref="contextCard">
        <dynamicList
          ref="dyList"
          :viewData="dynamicData.viewData"
          :addFormData="dynamicData.addFormData"
          :queryParams="queryParams"
          @updateValue="passToMaster"
          @switchShowMaster="switchShowMaster"
          class="dynamicList"
          :permissionPrefix="permissionPrefix"
        ></dynamicList>
      </el-card>
      <dynamicAddForm
        ref="addForm"
        :handleType="dynamicData.handleType"
        :updateData="dynamicData.updateData"
        :addFormData="dynamicData.addFormData"
        class="dynamicAddForm"
      ></dynamicAddForm>
    </div>
    <div v-show="showMaster">
      <spsMaster ref="spsMaster" :queryParams="selectedRow" @back="switchShowMaster"></spsMaster>
    </div>
    <el-dialog title="统计数据" :visible.sync="showStatistics" width="70%">
      <dynamic-statistics></dynamic-statistics>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showStatistics = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import dynamicList from '@/components/SpsPublic/Dynamic/dynamicList'
  import dynamicSearch from '@/components/SpsPublic/Dynamic/dynamicSearch'
  import dynamicButton from '@/components/SpsPublic/Dynamic/dynamicButton'
  import dynamicAddForm from '@/components/SpsPublic/Dynamic/dynamicAddForm'
  import spsMaster from '@/components/SpsPublic/Master/SpsMaster'
  import { baseListRetrieveCondition } from '@/api/mis/retrievecondition'
  import { listMisView } from '@/components/SpsPublic/Dynamic/misView.js'
  import { getBaseFunction } from '@/api/mis/function'
  import BreadCrumb from '@/components/SpsPublic/BreadCrumb/BreadCrumb'
  import store from '@/store/index'
  import { getFunNo } from '@/utils/party'
  import { permissionByFunNo } from '@/api/system/menu.js'
  import { exportMisTableData } from '@/components/SpsPublic/Dynamic/tableData.js'
  import cacheDestory from '@/utils/mixins/cacheDestory'
  // import dynamicStatistics from '@/components/SpsPublic/Dynamic/dynamicStatistics'

  export default {
    name: 'Dynamic',
    mixins: [cacheDestory],
    components: {
      dynamicList,
      dynamicSearch,
      dynamicButton,
      dynamicAddForm,
      spsMaster,
      BreadCrumb,
      // dynamicStatistics,
    },
    computed: {
      //     visitedViews() {
      //  return this.$store.state.tagsView.visitedViews
      // },
      //       cachedViewObj() {
      //  return this.$store.state.tagsView.cachedViewObj
      // },
    },
    data() {
      return {
        showStatistics: false,
        // routePath: '',
        permissionPrefix: 'dynamic:button:',
        store: store,
        timer: 0,
        dynamicData: {
          searchData: [],
          viewData: [],
          buttonData: {
            add: true,
            update: true,
            delete: true,
          },
          addFormData: {
            title: '',
            formData: [],
          },
          updateData: {},
          handleType: 'add',
          conType: {
            datePicker: 'el-date-picker',
            treeSelect: 'mis-select-tree',
          },
        },
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          ctFunNo: getFunNo(this.$route),
          queryType: this.$route.name.slice(-5).substring(0, 1),
        },
        selectedRow: {
          selectedCt: null,
          funNo: getFunNo(this.$route),
          functionData: {},
        },
        showMaster: false,
        dateFormat: '{y}-{m}-{d}',
      }
    },
    created() {
      store.dispatch('createSingleStore', this.selectedRow.funNo)
      const that = this
      permissionByFunNo(this.queryParams.ctFunNo).then((response) => {
        if (response && response.code === 200) {
          that.permissionPrefix = response.data
        }
      })
      // 请求获取搜索查询信息数据
      this.getRetrieve()
      // 获取table展示列数据
      this.getMisView()

      window.addEventListener('resize', () => {
        that.onResize()
      })
    },
    mounted() {},
    beforeRouteLeave(to, from, next) {
      console.log('beforeRouteLeave')
      next()
    },
    methods: {
      // 导出表格信息
      exportExcel() {
        const that = this
        this.$confirm('是否确认导出数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(function () {
            return exportMisTableData(that.queryParams)
          })
          .then((response) => {
            if (response.code === 200) {
              that.download(response.msg)
            } else {
              this.$message.error('导出出错了')
            }
          })
      },
      // 获取该功能的数据
      getFunctionData() {
        const that = this
        const promise = new Promise((resolve, reject) => {
          getBaseFunction(that.queryParams.ctFunNo).then((response) => {
            that.selectedRow.functionData = response.data
            const pageSize = response.data.amRow
            if (pageSize && pageSize > 0 && pageSize <= 100) {
              that.queryParams.pageSize = pageSize
            }
            store.dispatch('setCtFun', that.selectedRow.functionData)
            resolve()
          })
        })
        promise.then(() => {
          that.$refs.dySearch.postForm()
        })
      },

      // 传值至spsMaster
      passToMaster(value) {
        this.selectedRow.selectedCt = value
        this.switchShowMaster(false)
        this.$refs['spsMaster'].resetTabSelected()
        this.$refs['spsMaster'].refresh()
      },
      // 切换master显示
      switchShowMaster(refreshFlag) {
        // master中数据保存，则刷新列表
        if (refreshFlag) {
          this.$refs.dyList.getList()
        }
        this.showMaster =
          store.getters.singleStore['main' + this.selectedRow.funNo].showMaster
      },
      // 获取表格显示列
      getMisView() {
        this.loading = true
        listMisView(this.queryParams).then((response) => {
          this.dynamicData.viewData = response.rows
          this.dynamicData.viewData = this.dynamicData.viewData.filter(
            (column) => {
              return column.ctIfTable == '1'
            }
          )
          this.loading = false
        })
      },
      // 获取搜索查询信息数据
      getRetrieve() {
        baseListRetrieveCondition(this.queryParams).then((response) => {
          this.dynamicData.searchData = response.rows
          // 包含下级元素的位置
          let index = -1
          let checkValue = true
          for (let i = 0; i < this.dynamicData.searchData.length; i++) {
            const item = this.dynamicData.searchData[i]
            if (
              item.ctConType == this.dynamicData.conType.treeSelect &&
              item.ctConTreetype == '99' &&
              item.ctConDisp
            ) {
              checkValue = item.ctColDefaultv == '1'
              //   组织的下拉查询，赋登录人的管辖范围初始值
              item.ctColDefaultv = store.state.user.branchInfo.manageBranchLevel
              index = i + 1
            }
          }
          if (index != -1) {
            const retrieve = {
              ctConType: 'el-checkbox',
              ctColDefaultv: checkValue,
              ctColName: 'includeFlag',
              ctColTitle: '',
              ctConDisp: true,
            }
            this.dynamicData.searchData.splice(index, 0, retrieve)
          }
          // 获取该功能的数据
          this.getFunctionData()
        })
      },
      // 查询表格数据
      getList(val) {
        var keys = Object.keys(val)
        for (var i = 0; i < keys.length; i++) {
          this.queryParams[keys[i]] = val[keys[i]]
        }
        this.$refs['dyList'].getList()
      },
      // 删除操作
      handleRemove() {
        this.$refs.dyList.handleDelete()
      },
      handleStatistics() {
        this.showStatistics = true
      },
    },
  }
</script>

<style scoped lang="scss">
  .box-card {
    /* padding: 5px; */
    margin: 4px 10px 4px 10px;
  }
  .dynamicSearch {
    overflow: visible;
  }

  .card-bread-crumb {
    margin-left: 11px;
    margin-bottom: 3px;
  }

  .dynamicList {
    position: relative;
  }
</style>

